<template>
	<view>
	<view  v-if="isshow" @click="upload" style="width: 80px; height: 80px; background: #f0f0f0; text-align: center; line-height: 80px; text-align: center; font-size: 40px;" >
		+
	</view>
	<view style="margin-top: 20px; display: flex;flex-wrap: wrap;">
		<view  v-for="(item,index) in images"  style="width: 80px; height: 80px; margin-right: 10px; overflow: hidden; border-radius: 8px; margin-bottom: 10px; position: relative;">
			<view style="position: absolute; text-align: center; line-height: 80px; z-index: 888; width: 100%; height: 100%; background: rgba(0,0,0,0.4); top: 0; left: 0;">
					<u-icon @click="k(item,type)" name="eye" color="#fff" size='20px' style="margin-right: 10px;"></u-icon>
					<u-icon @click="d(index)" name="minus-circle"  color="#fff" size='20px'></u-icon>
			</view>
			<!-- {{JSON.stringify(images)}} -->
			<image v-if="type!='2'" style="width: 100%;" :src="item" mode="widthFix"></image>
			<!-- <video v-else style="width: 100%;" :src="item" controls loop></video> -->
			<!-- <image v-else style="width: 100%;" mode="widthFix" :src="item+'?vframe/jpg/offset/1'"></image> -->
			
			<view  v-else style="width: 100%;display: flex;text-align: center; overflow: hidden; border-radius: 6px; position: relative;">
				<view style="position: absolute; z-index: 1; top: 50%; left: 50%; transform:translate(-50%,-50%)">
					<u-icon color="#fff" size="40px" name="play-right-fill"></u-icon>
				</view>
				<image style="width: 100%;" mode="widthFix" :src="item+'?vframe/jpg/offset/1'"></image>
				<!-- <video :src="" controls></video> -->
			</view>
			
		</view>

	</view>
	<view @click="gb" v-if="istrue" style="position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;">
		
	</view>
	<video  v-if="istrue" style="position: fixed; left: 50%; top: 50%;transform:translate(-50%,-50%); z-index: 999; width: 100%;"  :src="video" controls loop></video>
	</view>
</template>

<script>
export default {
	components: {

	},
	// props:['type','count','getimg'],
	props: {
		type: {
			type: String,
			default: ''
		},
		count: {
			type: Number,
			default: 1
		},
		getimg: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			istrue:false,
			images:[],
			video:'',
			length:0,
			isshow:true,
		};
	},
	onShow() {
		// console.log(this.getimg,'this.getimg')
		// this.images = this.getimg
	},
	onShareAppMessage() {
		
	},
	onLoad(e) {
		console.log(this.type,'dddddddd')
		// if(this.type!=2){
		// 	this.length=9
		// }else{
		// 	this.length=1
		// }
	},
	onPullDownRefresh() {
		
	},
	watch:{
		getimg(e){
			console.log(e)
			this.images = e
		},
		type(e){
			this.type=e
		}
		
	},
	mounted() {
		console.log(this.type,'this.types')
	},
	methods: {
		gb(){
			this.video=''
			this.istrue=false
		},
		// 查看删除
		d(index){
			this.images.splice(index,1)
			console.log(this.images)
			this.isshow=true
			this.$emit('images',this.images)
		},
		k(item,type){
			console.log(item)
			if(type!=2){
				console.log(item)
				let arr = []
				arr.push(item)
				 uni.previewImage({
				   urls: arr,
				   longPressActions: {
				       itemList: [],
				       success: function(data) {
				         
				       },
				       fail: function(err) {
				           console.log(err.errMsg);
				       }
				   },
				})
			}else{
				this.istrue=true
				this.video=item
			}
			
		},
		
		upreq(filePath){
			console.log('2222222222',this.config.baseURL+'api/Upload/index')
			console.log(filePath)
			uni.uploadFile({
				url:this.config.baseURL+'api/Upload/index',
				filePath:filePath,
				name: 'file',
				success: (uploadFileRes) => {
					console.log(uploadFileRes)
					console.log(JSON.parse(uploadFileRes.data).data);
					if(JSON.parse(uploadFileRes.data).code==1){
						let url = JSON.parse(uploadFileRes.data).data
						this.images.push(url)
						this.$emit('images',this.images)
						if(this.type!=2){
							if(this.images.length==9){
								this.isshow=false
							}
						}else{
							if(this.images.length==1){
								this.isshow=false
							}
						}
						
					}
				}
			});
		},
		
		imgupload(){
			// var that=this
			let num = 9 - this.count
			uni.chooseImage({
			    count: num, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album'], //从相册选择
			    success:(res)=> {
					console.log(res)
			        for(let i in res.tempFilePaths){
						this.upreq(res.tempFilePaths[i])
					}
					// this.upreq(filePath)
			    },
				complete: (err) => {
					console.log(err)
				}
			});
		},
		videoupload(){
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success:(res)=> {
					console.log(res.tempFilePath,'sss')
					this.upreq(res.tempFilePath)
					// self.src = res.tempFilePath;
				}
			});
		},
		upload(){
			console.log(this.config.baseURL)
			if(this.type!=2){
				this.imgupload()
			}else{
				this.videoupload()
			}
		},
	}
};
</script>

<style>
</style>
